<template>
    <div class="all">
        <van-nav-bar title="个人中心" />
        <div class="message">
            <img src="../../../static/img/AppLogo.png" alt="">
            <p>用户名 ： 买鞋</p>
        </div>
        <div class="jump clearfix">
            <div class="coupon">
                <van-icon name="coupon-o" />
                <router-link :to="{name:'coupon'}">优惠券：1张</router-link>
            </div>
            <div class="collect">
                <van-icon name="shop-collect-o" />
                <router-link :to="{name:'collect'}">收藏 ：10</router-link>
            </div>
        </div>
        <ul class="main">
            <li v-for = 'list in lists' :key="list.id">
                <van-icon :name="list.src" />
                <router-link :to="list.name" >{{list.call}}</router-link>
            </li>
        </ul>
        <div class="exit">
            <router-link :to="{name:'login'}">退出账户</router-link >
        </div>
        <bottom/>
    </div>
</template>
<script>
export default {
    data(){
        return {
            lists : [
                {id:"1",src:"gold-coin-o",call:"我的钱包",name:{name:'moneybag'}},
                {id:"2",src:"shop-o",call:"待收货",name:{name:'bereceived'}},
                {id:"3",src:"logistics",call:"待发货",name:{name:'beshipped'}},
                {id:"4",src:"description",call:"待评价",name:{name:'toevaluate'}},
                {id:"5",src:"friends-o",call:"收货地址",name:{name:'address'}},
            ]
        }
    }
}
</script>
<style scoped  lang="">
.all{
    margin-top: 1.226667rem;
}
.van-nav-bar {
    background-color: #ff6341;
    position: fixed;
    width: 100%;
    height: 1.226667rem;
    top: 0;
    left: 0;
}
.van-nav-bar .van-icon {
    color: white;
}
.van-nav-bar__title {
    color: white;
}
.message{
    padding-top:.533333rem;
    width:100%;
    height:4.0rem;
    border-bottom:.026667rem solid #ff5733;
}
.message img{
    width:2.0rem;
    height:2.0rem;
    border-radius: 50%;
    margin-left:.533333rem;
    border:.026667rem solid #ff5733;
}
.message p{
    font-size:.533333rem;
    margin-left:.533333rem;
    display:inline-block;
    color:gray;
}
.van-icon{
    width:.566667rem;
    height:.566667rem;
    color:black;
    z-index: 999;
    line-height: 1.0rem;
}
.van-cell{
    line-height:1.0rem;
    color:black;
}
.van-cell__left-icon, .van-cell__right-icon{
    line-height:1.0rem;
}
.van-icon{
    font-size:.5rem;
}
.van-icom .van-icon-balance-list-o{
    line-height:.9rem
}
.jump{
    width:100%;
    border-bottom:1px solid #ff5733;
}
.coupon{
    float:left;
    width:50%;
    height:1.5rem;
    font-size:.4rem;
    color:gray;
    line-height:1.5rem;
    text-align: center;
    border-right:.026667rem solid #ff5733;
}
.collect{
    float:right;
    width:50%;
    height:1.5rem;
    font-size:.4rem;
    color:gray;
    line-height:1.5rem;
    text-align: center;
}
.main{
    width:100%;
}
.main li{
    height:1.5rem;
    padding-left:.866667rem;
    border-bottom:.026667rem dashed #ff5733;
    line-height:1.5rem;
    font-size:.4rem;
}
.exit{
    width:8rem;
    height:1.1rem;
    background-color:#ff5733;
    margin-top:1.0rem;
    margin-left:.986667rem;
    line-height: 1.1rem;
    text-align: center;
    font-size:.4rem;
}
.exit>*{
    color:white;
}
.exit a{
    color:white;
}
</style>